<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: houenxun
  Date: 15/12/17
  Time: 下午4:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="audi" uri="http://maihaoche.com" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<div class="container">

    <div class="bottom">
        <div class="head ">
            <div class="data-line data-line-l"></div>
            <span class="tit f-28">流程进度</span>

            <div class="data-line data-line-r"></div>
        </div>
        <div class="content">
            <div class="logistics">
                <div class="logistics-attr">
                    <ul>
                        <c:forEach var="actLog" items="${actLogList}" >

                        <li class="on">
                            <div class="logistics-l on">
                                <span class="icon-logistics ziliao"></span>
                                    <span class="f-28 status">
                                        <c:choose>
                                            <c:when test="${actLog.actType == \"startFlow\" }" >
                                                申请
                                            </c:when>
                                            <c:when test="${actLog.actType == \"pass\" }" >
                                                通过
                                            </c:when>
                                            <c:when test="${actLog.actType == \"reject\" }" >
                                                驳回
                                            </c:when>
                                            <c:otherwise>
                                                撤销
                                            </c:otherwise>
                                        </c:choose>
                                    </span>
                                <span class="bor-l"></span>
                                    <span class="f-24 status2">
                                        <c:if test="${actLog.actType == \"pass\" or actLog.actType == \"reject\" }" >
                                            <c:set var="taskName" value="${actLog.taskName}"  ></c:set>
                                            <%@ page language="java" import="com.dawanju.flow.FlowChain, com.dawanju.flow.node.TaskNode" pageEncoding="UTF-8" %>
                                            <%
                                                TaskNode taskNode = (TaskNode)((FlowChain)request.getAttribute("flowChain")).getBaseNode((String)request.getAttribute("taskName"));
                                                if(null != taskNode){
                                                    out.print(taskNode.getRoleEnum().getRole());
                                                    out.print(taskNode.getDisplayName());
                                                }else{
                                                    //out.print("task  is null");
                                                }
                                            %>
                                        </c:if>
                                        <%--#if($!actLog.actType.equals("pass") || $!actLog.actType.equals("reject"))
                                            ${flowChain.getBaseNode($actLog.taskName).roleEnum.role}${flowChain.getBaseNode($actLog.taskName).displayName}
                                        #end--%>

                                        操作者:${actLog.actUserName} ${actLog.reasonDesc}  ${actLog.memo}
                                    </span>
                            </div>
                            <div class="logistics-date">${audi:formatYMD(actLog.gmtCreate) }</div>
                        </li>
                        </c:forEach>
                        <c:forEach var="task" items="${taskList}" >
                        <li>
                            <div class="logistics-l">
                                <span class="icon-logistics ziliao"></span>
                                <span class="f-28 status"></span>
                                <span class="bor-l"></span>
                                <span class="f-24 status2">待${task.roleEnum.role}${task.displayName}</span>
                            </div>
                            <div class="logistics-date"></div>
                        </li>
                        </c:forEach>

                        <c:if test="${fn:length(taskList) > 0}" >
                        <li>
                            <div class="logistics-l">
                                <span class="icon-logistics finish"></span>
                                <span class="f-28 status">完成</span>
                                <span class="bor-l"></span>
                                <span class="f-24 status2"></span>
                            </div>
                            <div class="logistics-date"></div>
                        </li>
                        </c:if>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    html, body {
        height: 100%;
        width: auto;
        margin: 0;
        padding: 0
    }

    body {
        color: #000;
        font-size: 62.5%;
    }

    div, p, ul, li {
        margin: 0;
        padding: 0;
        border: 0
    }

    li {
        list-style: none
    }

    a {
        text-decoration: none
    }

    a.add_ {
        text-decoration: underline
    }

    .f-24 {
        font-size: 1rem
    }

    .f-28 {
        font-size: 1.17rem
    }

    .f-38 {
        font-size: 1.583rem
    }

    .header {
        position: relative;
        height: 43px;
        border-bottom: 1px solid #E6E6E6;
        z-index: 12000;
        background: #fff
    }

    .header .logo {
        width: 90px;
        height: 60px;
        position: absolute;
        left: 10px;
        top: 0
    }

    .header .head-txt {
        position: absolute;
        width: 115px;
        height: 14px;
        left: 115px;
        top: 14px
    }

    .header .contact #mobile {
        position: absolute;
        right: 20px;
        height: 43px;
        line-height: 43px;
        color: #606060;
    }

    .header .contact .to-r {
        position: absolute;
        right: 10px;
        top: 15px;
    }

    .container {
        min-width: 13.3rem;
        padding: 1.25rem 0.625rem;
        background: #EFEFEF;
        overflow: hidden;
        width: auto;
        height: auto
    }

    .container .top {
        width: auto;
        height: auto;
        overflow: hidden
    }

    .container .top .car-img {
        background: #fff;
        display: block
    }

    .container .top .car-img img {
        display: block;
        width: 100%
    }

    .container .top .car-tit {
        background: #717171;
        padding-left: 0.625rem;
        color: #fff;
        height: 2.92rem;
        line-height: 2.92rem
    }

    .container .top .car-info {
        background: #fff;
        color: #606060;
        padding: 0.625rem;
        box-sizing: border-box
    }

    .container .top .car-info p {
        height: 2rem;
        line-height: 2rem
    }

    .container .top .phone-number {
        color: #0972D2
    }

    .container .bottom {
        overflow: hidden;
        height: auto;
        width: 100%
    }

    .container .bottom .head {
        height: 3.3rem;
        line-height: 3.5rem;
        text-align: center;
        overflow: hidden;
        padding-top: 0.375rem;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative
    }

    .container .bottom .head .data-line {
        border-bottom: 0.83rem solid #E4E4E4;
        width: 10rem
    }

    .container .bottom .head .data-line-l {
        position: absolute;
        left: 0;
        top: 1.7rem
    }

    .container .bottom .head .data-line-r {
        position: absolute;
        right: 0;
        top: 1.7rem
    }

    .container .bottom .head .tit {
        color: #A4A4A4
    }

    .container .bottom .content {
        background: #fff;
        padding: 1.25rem;
        box-sizing: border-box
    }

    .container .bottom .content .tit {
        color: #008A03;
        text-align: left;
        margin: 1rem 0;
        height: 1.625rem;
        line-height: 1.625rem
    }

    .container .bottom .content .logistics {
        overflow: hidden;
        height: 100%;
        min-width: 13.33rem
    }

    .container .bottom .content .logistics .logistics-txt {
        line-height: 2rem
    }

    .container .bottom .content .logistics .logistics-attr {
        margin-bottom: 1.67rem;
        margin-top: 1rem;
        position: relative
    }

    .container .bottom .content .logistics .logistics-attr ul li {
        height: 3rem;
        color: #606060;
        position: relative
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-l {
        min-width: 10.625rem;
    }

    .container .bottom .content .logistics .logistics-attr ul li:before {
        content: "";
        background: url("//dn-mhc.qbox.me/17F915A2-DFED-494A-978B-FD2D157F8FD4.png") center bottom no-repeat;
        background-size: 0.67rem auto;
        position: absolute;
        width: 1rem;
        height: 0.67rem;
        left: 5.6rem;
        top: 0.5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li.on:before {
        content: "";
        background: url("//dn-mhc.qbox.me/17F915A2-DFED-494A-978B-FD2D157F8FD4.png") center top no-repeat;
        background-size: 0.67rem auto;
        position: absolute;
        width: 1rem;
        height: 0.67rem;
        left: 5.6rem;
        top: 0.5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-l .icon-logistics {
        background: url("//dn-mhc.qbox.me/1CF80313-B67A-4A32-B241-1C48EA51DB5D.png") -3rem top no-repeat;
        background-size: 5rem auto;
        position: absolute;
        width: 2.5rem;
        height: 2.5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li.on .logistics-l.on .icon-logistics {
        background: url("//dn-mhc.qbox.me/1CF80313-B67A-4A32-B241-1C48EA51DB5D.png") left top no-repeat;
        background-size: 5rem auto;
        position: absolute;
        width: 2.5rem;
        height: 2.5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-l .status {
        position: absolute;
        left: 3rem;
        top: 0.5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-l .status2 {
        position: absolute;
        left: 7rem;
        top: 0.5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-l .icon-logistics.fache {
        background-position: -3rem -2.5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-l .icon-logistics.yunsong {
        background-position: -3rem -5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-l .icon-logistics.jiaoche {
        background-position: -3rem -7.5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-l .icon-logistics.ziliao {
        background-position: -3rem -10rem
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-l .icon-logistics.finish {
        background-position: -3rem bottom
    }

    .container .bottom .content .logistics .logistics-attr ul li.on .logistics-l.on .icon-logistics.fache {
        background-position: left -2.5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li.on .logistics-l.on .icon-logistics.yunsong {
        background-position: left -5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li.on .logistics-l.on .icon-logistics.jiaoche {
        background-position: left -7.5rem
    }

    .container .bottom .content .logistics .logistics-attr ul li.on .logistics-l.on .icon-logistics.ziliao {
        background-position: left -10rem
    }

    .container .bottom .content .logistics .logistics-attr ul li.on .logistics-l.on .icon-logistics.finish {
        background-position: left bottom
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-l .bor-l {
        border-left: 2px solid #DFDFDF;
        position: absolute;
        left: 6rem;
        top: 0.6rem;
        height: 3rem;
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-l.on .bor-l {
        border-left: 2px solid #008A03;
        position: absolute;
        left: 6rem;
        top: 0.6rem;
        height: 3rem;
    }

    .container .bottom .content .logistics .logistics-attr ul li:last-child .logistics-l .bor-l {
        border: none
    }

    .container .bottom .content .logistics .logistics-attr ul li .logistics-date {
        position: absolute;
        right: 0;
        top: 0.5rem
    }


</style>


